<!--上传组件-->
<template>
  <el-upload
    class="upload-demo"
    action=""
    name="file"
    :limit='limit'
    :http-request="handleUpload"
    :before-remove="handleBeforeRemove"
    :file-list="file_list"
    :on-exceed="handleExceed"
    list-type="picture-card">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">{{upload_tip}}</div>
  </el-upload>
</template>

<script>
  import { uploadImage } from '@/api/upload.js';
  export default{
     name:'Upload',
     props:['catch_urls','remove_urls','limit','file_list','upload_tip'],
     methods:{
        handleBeforeRemove(file,fileList){
           for(let index in fileList){
              if(file.uid==fileList[index]['uid']){
                 this.remove_urls(index);
              }
           }
        },
        handleUpload(file){
          let that=this;
          let fd=new FormData();
          fd.append('file[]',file.file);
          fd.append('api_token',that.$store.getters.getSessionId);
          uploadImage(fd).then(function(response){
              if(response.data.code==1){
                  that.catch_urls(response.data.urls[0]);
              }else{
                  that.$message({
                      message:response.data.msg,
                      type:'error',
                  });
              }
          })
        },
        //达到图片上传上限
        handleExceed(){
          this.$message({
             message:'已达到图片上传数量上限'+this.limit+'张',
             type:'error'
          });
        }
     }
  }
</script>

<style>
</style>
